
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
      layout:decorate="~{admin/layout}">
<body>

<div class="content-wrap" layout:fragment="content">
    <style>
        .col-md-3 {
            width: 20%;
        }
        .imgtree{
            height: 20px;
            width: 20px;
        }
        .icon-list-item .glyphicon, .icon-list-item .fa {
            width: 20px;
            margin-right: 10px;
        }
        .form-actions {
            margin: 1rem 0 0;
            padding: 1rem;
            background-color: #fff;
        }
        .fa-unlock-alt{
            color: #c20000;
        }
    </style>
    <script th:src="@{/vendor/shufflejs/dist/jquery.shuffle.modernizr.min.js}"></script>
    <script th:src="@{/vendor/magnific-popup/dist/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/js/gallery.js}"></script>
    <main id="content" class="content" role="main">
        <ol class="breadcrumb">
            <li>苗木出库</li>
            <li class="active"><span class="fw-semi-bold"><span th:text="${landMass.areaLocation.serialNumber}+${landMass.serialNumber}"></span> 地块</span></li>
        </ol>
        <div class="col-lg-6">
            <div class="tab-pane" id="basic-out" role="tabpanel" aria-labelledby="assumtion-tab"  aria-expanded="false">
                <div class="form-horizontal form-label-left">
                    <input type="hidden" name="landMass_id" th:value="${landMass.landMass_id}">
                    统计汇总 &nbsp;&nbsp;<span th:text="${collect}"></span><br>
                    <font color="#1afa29" th:if="${tree1 != null}"><img class="sanj" th:src="@{/img/tree/三角形-红.png}">:<span th:text="${tree1}"></span>&nbsp;&nbsp;</font>
                    <font color="#f4ea2a" th:if="${tree2 != null}"><img class="sanj" th:src="@{/img/tree/三角形-黄.png}">:<span th:text="${tree2}"></span>&nbsp;&nbsp;</font>
                    <font color="#d81e06" th:if="${tree3 != null}"><img class="sanj" th:src="@{/img/tree/三角形-绿.png}">:<span th:text="${tree3}"></span>&nbsp;&nbsp;</font>
                    <font color="#1296db" th:if="${tree4 != null}"><img class="sanj" th:src="@{/img/tree/三角形-蓝.png}">:<span th:text="${tree4}"></span>&nbsp;&nbsp;</font>
                    <font color="#13227a" th:if="${tree5 != null}"><img class="sanj" th:src="@{/img/tree/三角形-紫.png}">:<span th:text="${tree5}"></span>&nbsp;&nbsp;</font>
                    <fieldset>
                        <div id="treelist" th:each="treeWells :${treeWell}" class="icon-list-item col-md-3 col-sm-4">
                                <div th:if="${treeWells.salesState == 1}">
                                    <p class="hidden-md-down" data-toggle="tooltip" data-html="true" th:data-original-title="${treeWells.titles}" data-placement="bottom">
                                        <input class="tree" th:id="${'_'+treeWells.serialNumber}" th:value="${treeWells.tree_id}" th:treeWell_id="${treeWells.treeWell_id}" th:serialNumber=" ${treeWells.serialNumber}" type="checkbox" name="tree_id">
                                        <img class="sanj" th:src="@{/img/tree/三角形-红.png}" th:value="${treeWells.tree_id}" data-toggle="modal"  data-target="#myModal19" >
                                        <img th:if="${treeWells.state==3}" class="suod" th:src="@{/img/锁.png}">
                                    </p>
                                </div>
                                <div th:if="${treeWells.salesState == 2}">
                                    <p class="hidden-md-down" data-toggle="tooltip" data-html="true" th:data-original-title="${treeWells.titles}" data-placement="bottom">
                                        <input class="tree" th:id="${'_'+treeWells.serialNumber}"  th:value="${treeWells.tree_id}" th:treeWell_id="${treeWells.treeWell_id}" th:serialNumber=" ${treeWells.serialNumber}" type="checkbox" name="tree_id">
                                        <img class="sanj" th:src="@{/img/tree/三角形-黄.png}" th:value="${treeWells.tree_id}" data-toggle="modal"  data-target="#myModal19" >
                                        <img th:if="${treeWells.state==3}" class="suod" th:src="@{/img/锁.png}">
                                    </p>
                                </div>
                                <div th:if="${treeWells.salesState == 3}">
                                    <p class="hidden-md-down" data-toggle="tooltip" data-html="true" th:data-original-title="${treeWells.titles}" data-placement="bottom">
                                        <input class="tree" th:id="${'_'+treeWells.serialNumber}"  th:value="${treeWells.tree_id}" th:treeWell_id="${treeWells.treeWell_id}" th:serialNumber=" ${treeWells.serialNumber}" type="checkbox" name="tree_id">
                                        <img class="sanj" th:src="@{/img/tree/三角形-绿.png}" th:value="${treeWells.tree_id}" data-toggle="modal"  data-target="#myModal19" >
                                        <img th:if="${treeWells.state==3}" class="suod" th:src="@{/img/锁.png}">
                                    </p>
                                </div>
                                <div th:if="${treeWells.salesState == 4}">
                                    <p class="hidden-md-down" data-toggle="tooltip" data-html="true" th:data-original-title="${treeWells.titles}" data-placement="bottom">
                                        <input class="tree"  th:id="${'_'+treeWells.serialNumber}"  th:value="${treeWells.tree_id}" th:treeWell_id="${treeWells.treeWell_id}" th:serialNumber=" ${treeWells.serialNumber}" type="checkbox" name="tree_id">
                                        <img class="sanj" th:src="@{/img/tree/三角形-蓝.png}" th:value="${treeWells.tree_id}" data-toggle="modal"  data-target="#myModal19" >
                                        <img th:if="${treeWells.state==3}" class="suod" th:src="@{/img/锁.png}">
                                    </p>
                                </div>
                                <div th:if="${treeWells.salesState == 5}">
                                    <p class="hidden-md-down" data-toggle="tooltip" data-html="true" th:data-original-title="${treeWells.titles}" data-placement="bottom">
                                        <input class="tree" th:id="${'_'+treeWells.serialNumber}"  th:value="${treeWells.tree_id}" th:treeWell_id="${treeWells.treeWell_id}" th:serialNumber=" ${treeWells.serialNumber}" type="checkbox" name="tree_id">
                                        <img class="sanj" th:src="@{/img/tree/三角形-紫.png}" th:value="${treeWells.tree_id}" data-toggle="modal"  data-target="#myModal19" >
                                        <img th:if="${treeWells.state==3}" class="suod" th:src="@{/img/锁.png}">
                                    </p>
                                </div>
                            </div>
                    </fieldset>
                    <!--<input type="button" value="恢复" class="btn" id="recover4">-->
                    输入范围:<input class="fanwei" type="text" name="stat" id="stat4" >~
                    <input class="fanwei" type="text" name="stop" id="stop4">
                    <input type="button" id="affirm4"  class="btn" value="确认">
                    <input type="button" value="全选" class="btn" id="treeselectAll">
                    <input type="button" value="复原" class="btn" id="treeunSelect">
                    <input value="出库" id="puttree" data-toggle="modal" data-target="#myModal18" class="btn btn-info width-100 mb-xs" style="margin-top: 4px;" role="button">
                    <script>
                        var chk_value4 =[];
                        $("#treeselectAll").click(function () {
                            saveval4();
                            $("#treelist :checkbox,#all").prop("checked", true);
                        });

                        $("#treeunSelect").click(function () {
                            saveval4();
                            $("#treelist :checkbox,#all").prop("checked", false);
                        });

                        $("#recover4").click(function () {
                            $("#treelist :checkbox,#all").prop("checked", false);
                            for(var i=0;i<chk_value4.length;i++){
                                $('#'+chk_value4[i]).prop("checked", true);
                            }

                        });

                        $("#affirm4").click(function () {
                            saveval4();
                            $("#treelist :checkbox,#all").prop("checked", false);
                            var stat=Number($("#stat4").val());
                            var stop=Number($("#stop4").val());
                            console.log(stat+"======"+stop);
                            if(stat<stop){
                                console.log(true);
                            }else {
                                console.log(false);
                            }
                            for(stat;stat<=stop;stat++){
                                $('#'+'_'+stat).prop("checked", true);
                            }

                        });

                        function saveval4(){
                            $('input[name="tree_id"]:checked').each(function(){
                                chk_value4.push($(this).attr("id"));
                            });
                        }
                    </script>
                </div>
                <script>
                    $(function () {
                        $("#puttree").click(function () {
                            var str="";
                            $("#subtype").val(2);
                            $(".frommodel").hide();
                            $(".tree").each(function (i, obj) {
                                if($(this).is(':checked')){
                                    str=str+($(this).attr("value")+";");
                                    console.log($('#q_'+$(this).attr("treeWell_id")).show());
                                }
                            });
                            $("#submit2").click(function () {
                                if($("#subtype").val()==2){
                                    $.ajax({
                                        url: "/admin/tree/outtree",
                                        type: 'POST',
                                        data:{"treeids":str},
                                        async: false,
                                        success: function (data) {
                                            console.log(data);
                                            location.reload();
                                        },
                                        error: function (xhr) {
                                            console.log("error")
                                        }
                                    });
                                }
                            });
                        });

                        $("#signtree").click(function () {
                            $("#priceandlocation").toggle();
                            console.log("log");
                            $("#priceadd").click(function(){
                                var str="";
                                $(".tree").each(function (i, obj) {
                                    if($(this).is(':checked')){
                                        str=str+($(this).attr("value")+";");
                                    }
                                });
                                if(str!=""){
                                    var price=$("#price").val();
                                    var remark=$("#remark").val();
                                    $.ajax({
                                        url: "/admin/tree/marktree",
                                        type: 'POST',
                                        data:{"treeids":str,"remark":remark},
                                        async: false,
                                        success: function (data) {
                                            console.log(data);
                                            location.reload();
                                        },
                                        error: function (xhr) {
                                            console.log("error")
                                        }
                                    });
                                }
                            });
                        });

                        $("#dietree").click(function () {
                            var str="";
                            $(".tree").each(function (i, obj) {
                                if($(this).is(':checked')){
                                    str=str+($(this).attr("value")+";");
                                }
                            });
                            console.log(str);
                            $.ajax({
                                url: "/admin/tree/dietree",
                                type: 'POST',
                                data:{"treeids":str},
                                async: false,
                                success: function (data) {
                                    console.log(data);
                                    location.reload();
                                },
                                error: function (xhr) {
                                    console.log("error")
                                }
                            });
                        });

                        $("#updatetree").click(function () {
                            $("#updateinfo").toggle();
                            $("#sub").click(function(){
                                var str="";
                                $(".tree").each(function (i, obj) {
                                    if($(this).is(':checked')){
                                        str=str+($(this).attr("value")+";");
                                    }
                                })
                                if(str!=""){
                                    $("#treeids").val(str);
                                    $("#basic-out").submit();
                                }
                            });

                        });
                    });
                </script>
            </div>
            <div class="modal fade" id="myModal18" tabindex="-1" role="dialog" aria-labelledby="myModalLabel18" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h5 class="modal-title text-xl-center fw-bold mt" id="myModalLabel18">出库确认</h5>
                        </div>
                        <div class="modal-body bg-gray-lighter">
                            <div>
                                <div class="row icon-list">
                                    <input id="subtype" type="hidden">
                                    <div th:each="treeWells :${treeWell}" class="icon-list-item col-md-3 col-sm-4" >
                                        <div class="frommodel" style="display:none;" th:id="${'q_'+treeWells.treeWell_id}" th:if="${treeWells.salesState == 0}">
                                            <p class="hidden-md-down" data-toggle="tooltip" data-html="true"  th:data-original-title=" ${treeWells.serialNumber}" data-placement="bottom">
                                                <i class="fa fa-tree"></i>
                                            </p>
                                        </div>

                                        <div  class="frommodel" style="display:none;" th:id="${'q_'+treeWells.treeWell_id}" th:if="${treeWells.salesState == 1}">
                                            <p  class="hidden-md-down" data-toggle="tooltip" data-html="true" th:data-original-title="${treeWells.titles}" data-placement="bottom">
                                                <i class="fa fa-tree"></i>
                                            </p>
                                        </div>

                                        <div class="frommodel" style="display:none;" th:id="${'q_'+treeWells.treeWell_id}" th:if="${treeWells.salesState == 2}">
                                            <p  class="hidden-md-down" data-toggle="tooltip" data-html="true" th:data-original-title="${treeWells.titles}" data-placement="bottom">
                                                <i class="fa fa-tree"></i>
                                            </p>
                                        </div>

                                        <div  class="frommodel" style="display:none;" th:id="${'q_'+treeWells.treeWell_id}" th:if="${treeWells.salesState == 3}">
                                            <p  class="hidden-md-down" data-toggle="tooltip" data-html="true" th:data-original-title="${treeWells.titles}" data-placement="bottom">
                                                <i class="fa fa-tree"></i>
                                            </p>
                                        </div>

                                        <div  class="frommodel" style="display:none;" th:id="${'q_'+treeWells.treeWell_id}" th:if="${treeWells.salesState == 4}">
                                            <p  class="hidden-md-down" data-toggle="tooltip" data-html="true" th:data-original-title="${treeWells.titles}" data-placement="bottom">
                                                <i class="fa fa-tree"></i>
                                            </p>
                                        </div>

                                        <div  class="frommodel" style="display:none;" th:id="${'q_'+treeWells.treeWell_id}" th:if="${treeWells.salesState == 5}">
                                            <p  class="hidden-md-down" data-toggle="tooltip" data-html="true" th:data-original-title="${treeWells.titles}" data-placement="bottom">
                                                <i class="fa fa-tree"></i>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button id="submit2" class="btn btn-danger btn-rounded pull-xs-right">提交</button>
                                    <button type="button" class="btn btn-gray" data-dismiss="modal">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="myModal19" tabindex="-1" role="dialog" aria-labelledby="myModalLabel19" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <img id="imgurl" style="height: 600px;width: 598px;">
                        <h5 id="err" style="display: none;text-align:center;">暂无图像 </h5>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
</body>
</html>